<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-[#d9eee3] box">
    <!-- 顶部Logo -->
    <Header />
    <!-- 主卡片容器 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mx-auto w-95/100 mt-8">
      <div class="mb-4" style="font-size: 26px">
        <span class="font-bold">Thank you for your order!</span>
      </div>
      <div class="mb-6">
        <span class="text-lg"
          >Your payment was successful. You will receive an email with tracking
          information.</span
        >
      </div>

      <!-- 订单信息 -->
      <div class="mb-8">
        <!-- <div class="flex justify-between items-center mb-4">
              <h2 class="text-xl font-medium">您的订单</h2>
              <button class="text-[#2D6E74]">编辑</button>
            </div> -->
        <div class="mb-6">
          <span class="text-lg font-bold mr-3">Order </span>
          <span class="text-lg font-bold mr-3">{{ paymentInfo.orderId }}</span>
        </div>
        <div
          class="flex items-center border border-[#477577] rounded-lg"
          style="padding: 2px"
        >
          <img :src="bottleImg" alt="" class="w-16 h-16 object-cover rounded" />
          <div class="ml-4 flex-1 pr-4 flex justify-between">
            <h3 class="font-medium">{{ productName }}</h3>
            <div>
              <span class="money font-bold">${{ paymentInfo.productPrice }} </span>
              <span>$0</span>
            </div>
          </div>
        </div>
      </div>
      <p>Subtotal: <span class="money">${{ paymentInfo.productPrice }}</span> $0 (Insurance coverage pending)</p>

      <p v-if="paymentInfo.shipping == 'TRUE'">Shipping: {{ order }}</p>
      <p>Taxes: $0</p>

      <div class="mb-6">
        <span class="text-lg font-bold mr-3 ">Total: </span>
        <span class="text-lg font-bold mr-3">$0.00 USD</span>
      </div>
      <p>
        Credit Card will be charged ${{ paymentInfo.productPrice }} in the event of insurance claim denial.
      </p>
      <div class="mb-4">
        <span class="text-lg font-bold mr-3">Customer Information</span>
      </div>
      <div v-if="paymentInfo.shipping == 'TRUE'">
        <p  class="font-bold mb-4">Shipping Address</p>
        <div class="leading-none">
          <p>{{ paymentInfo.shippingName}}</p>
          <p>{{ paymentInfo.shippingAddr1}}</p>
          <p>{{ `${paymentInfo.shippingCity},${paymentInfo.shippingState},${paymentInfo.shippingZipCode}` }}</p>
          <p>{{ paymentInfo.shippingCountry}}</p>
        </div>
      </div>
      <div v-else>
        <p  class="font-bold mb-4">No Shipping Needed</p>

      </div>

      <p class="font-bold mb-4 mt-6">Billing Address</p>
      <div class="leading-none">
          <p>{{ paymentInfo.billingName}}</p>
          <p>{{ paymentInfo.billingAddr1}}</p>
          <p>{{ `${paymentInfo.billingCity},${paymentInfo.billingState},${paymentInfo.billingZipCode}` }}</p>
          <p>{{ paymentInfo.billingCountry}}</p>
      </div>
      <p class="font-bold mb-4 mt-6">Payment</p>
      <div class="flex">
        <img :src="visa" alt="" />
        <span class="ml-4">ending with {{ lastCastFour }}</span>
      </div>
      <p v-if="paymentInfo.shipping == 'TRUE'" class="font-bold mb-4 mt-6">Shipping Method</p>
      <p v-if="paymentInfo.shipping == 'TRUE'" class=" mb-4 mt-6">{{ order }}</p>
    </div>
    <div class=" mt-8 leading-none " style="">
      <img :src="bottomlog" alt="GOPATH Diagnostics" class="mx-auto w-30"/>
  
    </div>
  </div>
</template>
        <script lang="ts" setup>
import { ref,onMounted } from "vue";
import { Check } from "@element-plus/icons-vue";
import log from "@/assets/img/red-uti-logo.png";
import bottomlog from "@/assets/img/green-uti-logo.png";
import bottleImg from "@/assets/img/uti-bottle.png";
import visa from "@/assets/img/visa.png";
import Header from "@/views/components/insurance-header.vue";
import { useRouter } from "vue-router";

import { storeToRefs } from 'pinia';
import { useUtiStore } from '@/store/tui'
import { useFileStore } from '@/store/file'
import { getLastFour } from '@/api/index'

const store = useUtiStore()
const fileStore = useFileStore()
const {productName, paymentInfo , lastCastFour, order} = storeToRefs(store)
const { cardImageFront,cardImageBack,fontUrl,backUrl} = storeToRefs(fileStore)
console.log('insuranceinfo-store解构==>',productName, paymentInfo);
console.log('insuranceinfo-store解构==>',cardImageFront,cardImageBack,fontUrl,backUrl);

onMounted( ()=>{
  getFour()

})

const router = useRouter();
const selectedOption = ref("1");
const insuranForm = {
  dateOfBirth: "",
};
const handleSubmit = () => {
  router.push({
    path: "/finish",
  });
};
const getFour =async  ()=>{
  let formData = getFormData();
  const res = await getLastFour(formData)
  console.log('res4位',res);
  if(res.data) {
    lastCastFour.value = res.data
  }
}
const agreement = ref(false);
const goBack = () => {
  router.push({
    path: "/home",
  });
};
const getFormData = (newparam = {}) => {
  paymentInfo.value = {
    ...paymentInfo.value,
    ...newparam,
  };
  const formData = new FormData();
  formData.append("paymentInfo", JSON.stringify(paymentInfo.value));
  formData.append("cardImageFront", cardImageFront.value);
  formData.append("cardImageBack", cardImageBack.value);
  return formData;
};
</script>
<style scoped lang="less">
@import "@/assets/css/base.css";
.box {
  font-family: Bicyclette;
}
.bg-gray-100 {
  background-color: #f3f4f6;
}
.bg-gray-600 {
  background-color: #4b5563 !important;
}
button:focus {
  outline: none;
}
input[type="radio"] {
  display: none;
}
.text-gray-600 {
  color: #6f6f6f;
}
.money {
  text-decoration: line-through;
}
.insurance,
.selfPay {
  line-height: 1.2;
  font-weight: 700;
  font-size: 14px;
}
input::placeholder {
  color: #000000;
}
</style>
        